import { useState, useRef, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { ArrowLeft, Send, Image, Camera, Smile, User } from 'lucide-react';
import { doctors } from '../data/mockData';
import type { Doctor } from '../data/mockData';
import request from '../api/request';
import aiRequest from '../api/aiRequest';

interface Message {
  id: string;
  type: 'text' | 'image' | 'system';
  content: string;
  isFromUser: boolean;
  time: string;
  avatar?: string;
}

/**
 * 咨询页面组件 - 在线问诊聊天界面
 * 
 * 功能特性：
 * - 实时聊天对话
 * - 医生信息展示
 * - 消息发送和接收
 * - 图片消息支持
 * - AI智能回复
 * - 消息历史记录
 * - 随机头像生成
 * 
 * 主要状态：
 * - message: 当前输入的消息
 * - messages: 消息历史列表
 * - doctor: 医生信息
 * - loading: 加载状态
 * 
 * 消息类型：
 * - text: 文本消息
 * - image: 图片消息
 * - system: 系统消息
 * 
 * 消息结构：
 * - id: 消息唯一标识
 * - type: 消息类型
 * - content: 消息内容
 * - isFromUser: 是否来自用户
 * - time: 发送时间
 * - avatar: 头像
 * 
 * 医生信息获取：
 * - 优先从本地mockData获取
 * - 备用API获取
 * - 错误处理和降级
 * 
 * AI回复功能：
 * - 集成AI请求接口
 * - 智能回复生成
 * - 上下文理解
 * 
 * 文件上传：
 * - 图片文件选择
 * - 文件类型验证
 * - 大小限制处理
 * 
 * 页面布局：
 * - 顶部医生信息栏
 * - 消息列表区域
 * - 底部输入区域
 * - 功能按钮区域
 * 
 * 路由参数：
 * - doctorId: 医生ID（从URL参数获取）
 * 
 * @returns {JSX.Element} 咨询页面组件
 */
export default function ConsultationPage() {
  const { doctorId } = useParams<{ doctorId: string }>();
  const navigate = useNavigate();
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState<Message[]>([
    {
      id: '1',
      type: 'system',
      content: '欢迎使用在线问诊服务，正在为您分配咨询医生，请稍候...',
      isFromUser: false,
      time: new Date().toLocaleTimeString(),
      avatar: '', // 系统消息暂时不显示头像
    },
  ]);

  const [doctor, setDoctor] = useState<Doctor | null>(null);

  // 获取医生详情
  useEffect(() => {
    const fetchDoctorDetail = async () => {
      if (!doctorId) return;
      
      try {
        // 先从本地mockData查找
        const localDoctor = doctors.find(d => d.id === doctorId);
        
        if (localDoctor) {
          setDoctor(localDoctor);
          return;
        }
        
        // 如果本地没有，从API获取
        const response = await request.get(`/doctor/detail`, {
          params: { id: doctorId }
        });
        
        if (response.data) {
          setDoctor(response.data);
        }
      } catch (error) {
        console.error('获取医生详情失败:', error);
        // 如果API失败，使用本地数据作为备选
        const localDoctor = doctors.find(d => d.id === doctorId);
        if (localDoctor) {
          setDoctor(localDoctor);
        }
      }
    };

    fetchDoctorDetail();
  }, [doctorId]);

  // 当医生信息加载完成后，更新系统消息
  useEffect(() => {
    if (doctor) {
      setMessages(prev => prev.map(msg => 
        msg.id === '1' 
          ? { ...msg, content: `欢迎使用在线问诊服务，已为您分配${doctor.name}咨询医生，请稍候...` }
          : msg
      ));
    }
  }, [doctor]);

  // 生成随机头像
  const generateRandomAvatar = () => {
    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F'];
    const color = colors[Math.floor(Math.random() * colors.length)];
    const initials = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    const initial = initials[Math.floor(Math.random() * initials.length)];
    
    return {
      color,
      initial,
      svg: `<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" fill="${color}"/>
        <text x="20" y="26" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="white">${initial}</text>
      </svg>`
    };
  };

  // 用户随机头像
  const userAvatar = useRef(generateRandomAvatar());

  // 头像显示组件
  const AvatarDisplay = ({ avatar, name }: { avatar?: string; name?: string }) => {
    if (!avatar) {
      // 如果没有头像，使用UI Avatars生成
      return (
        <img 
          src={`https://ui-avatars.com/api/?name=${name || '医生'}&background=4F46E5&color=fff&size=40`}
          alt={name || '医生'}
          className="w-10 h-10 rounded-full"
        />
      );
    }
    
    if (avatar.startsWith('data:image') || avatar.startsWith('http')) {
      // 如果是图片URL或base64
      return (
        <img 
          src={avatar}
          alt={name || '医生'}
          className="w-10 h-10 rounded-full object-cover"
        />
      );
    }
    
    // 如果是SVG字符串
    return (
      <div 
        className="w-10 h-10 rounded-full"
        dangerouslySetInnerHTML={{ __html: avatar }}
      />
    );
  };

  const [loading, setLoading] = useState(false);
  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const cameraInputRef = useRef<HTMLInputElement>(null);

  const sendMessage = async () => {
    if (!message.trim() || loading) return;

    const userMessage: Message = {
      id: Date.now().toString(),
      type: 'text',
      content: message,
      isFromUser: true,
      time: new Date().toLocaleTimeString(),
      avatar: userAvatar.current.svg,
    };

    setMessages(prev => [...prev, userMessage]);
    const currentMessage = message;
    setMessage('');
    setLoading(true);

    try {
              // 调用本地后台的AI聊天接口
        const response = await aiRequest.post('/ai-chat', {
          message: currentMessage,
          doctorId: doctorId,
          timestamp: new Date().toISOString()
        });

      if (response.data && response.data.reply) {
        const aiReply: Message = {
          id: (Date.now() + 1).toString(),
          type: 'text',
          content: response.data.reply,
          isFromUser: false,
          time: new Date().toLocaleTimeString(),
          avatar: doctor?.avatar || `https://ui-avatars.com/api/?name=${doctor?.name || '医生'}&background=4F46E5&color=fff&size=40`,
        };
        setMessages(prev => [...prev, aiReply]);
      } else {
        // 如果API没有返回回复，显示默认回复
        const defaultReply: Message = {
          id: (Date.now() + 1).toString(),
          type: 'text',
          content: '您好，我是AI医生助手，请问您有什么症状需要咨询吗？',
          isFromUser: false,
          time: new Date().toLocaleTimeString(),
          avatar: doctor?.avatar || `https://ui-avatars.com/api/?name=${doctor?.name || '医生'}&background=4F46E5&color=fff&size=40`,
        };
        setMessages(prev => [...prev, defaultReply]);
      }
    } catch (error) {
      console.error('AI服务器连接失败:', error);
      
      // 显示错误消息，要求用户检查本地后台
      const errorMessage: Message = {
        id: (Date.now() + 1).toString(),
        type: 'text',
        content: '抱歉，无法连接到咨询医生服务器。请确保本地后台服务已启动在端口8001上。',
        isFromUser: false,
        time: new Date().toLocaleTimeString(),
        avatar: doctor?.avatar || `https://ui-avatars.com/api/?name=${doctor?.name || '医生'}&background=4F46E5&color=fff&size=40`,
      };
      setMessages(prev => [...prev, errorMessage]);
      
      // 错误处理完成
    } finally {
      setLoading(false);
    }
  };



  // 处理图片上传
  const handleImageUpload = () => {
    fileInputRef.current?.click();
  };

  // 处理文件选择
  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file && file.type.startsWith('image/')) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const imageMessage: Message = {
          id: Date.now().toString(),
          type: 'image',
          content: e.target?.result as string,
          isFromUser: true,
          time: new Date().toLocaleTimeString(),
          avatar: userAvatar.current.svg,
        };
        setMessages(prev => [...prev, imageMessage]);
      };
      reader.readAsDataURL(file);
    }
  };

  // 处理拍照
  const handleCameraCapture = () => {
    cameraInputRef.current?.click();
  };

  // 处理拍照文件选择
  const handleCameraFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file && file.type.startsWith('image/')) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const imageMessage: Message = {
          id: Date.now().toString(),
          type: 'image',
          content: e.target?.result as string,
          isFromUser: true,
          time: new Date().toLocaleTimeString(),
          avatar: userAvatar.current.svg,
        };
        setMessages(prev => [...prev, imageMessage]);
      };
      reader.readAsDataURL(file);
    }
  };

  // 处理表情选择
  const handleEmojiSelect = (emoji: string) => {
    setMessage(prev => prev + emoji);
    setShowEmojiPicker(false);
  };



  // 键盘事件处理
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  // 如果没有指定医生，显示通用问诊界面
  if (!doctor) {
    return (
      <div className="flex flex-col h-screen bg-gray-50">
        {/* 头部 */}
        <div className="bg-white px-4 py-3 border-b border-gray-100 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <button 
              onClick={() => navigate(-1)}
              className="p-1 text-gray-600"
            >
              <ArrowLeft size={20} />
            </button>
            <div>
              <h1 className="text-base font-semibold text-gray-900">
                咨询医生
              </h1>
              <p className="text-xs text-gray-500">
                正在分配咨询医生...
              </p>
            </div>
          </div>
          <div className="flex items-center space-x-2">
            <div className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse"></div>
          </div>
        </div>



        {/* 消息列表 */}
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          {messages.map((msg) => (
            <div
              key={msg.id}
              className={`flex ${msg.isFromUser ? 'justify-end' : 'justify-start'} items-start space-x-2`}
            >
              {!msg.isFromUser && (
                <div className="flex-shrink-0">
                  <AvatarDisplay avatar={msg.avatar} name={doctor?.name} />
                </div>
              )}
              <div
                className={`max-w-xs px-3 py-2 rounded-lg ${
                  msg.isFromUser
                    ? 'bg-primary-500 text-white'
                    : msg.type === 'system'
                    ? 'bg-gray-100 text-gray-600 text-center'
                    : 'bg-white text-gray-900 border border-gray-200'
                }`}
              >
                {msg.type === 'image' ? (
                  <div>
                    <img 
                      src={msg.content} 
                      alt="用户上传的图片"
                      className="w-full h-auto rounded max-w-full"
                      style={{ maxHeight: '200px' }}
                    />
                    <p className={`text-xs mt-1 ${
                      msg.isFromUser ? 'text-primary-100' : 'text-gray-400'
                    }`}>
                      {msg.time}
                    </p>
                  </div>
                ) : (
                  <>
                    <p className="text-sm">{msg.content}</p>
                    <p className={`text-xs mt-1 ${
                      msg.isFromUser ? 'text-primary-100' : 'text-gray-400'
                    }`}>
                      {msg.time}
                    </p>
                  </>
                )}
              </div>
              {msg.isFromUser && (
                <div className="flex-shrink-0">
                  {msg.avatar ? (
                    <div 
                      className="w-10 h-10 rounded-full overflow-hidden"
                      dangerouslySetInnerHTML={{ __html: msg.avatar }}
                    />
                  ) : (
                    <div className="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
                      <User size={20} className="text-gray-600" />
                    </div>
                  )}
                </div>
              )}
            </div>
          ))}
          
          {/* 加载状态指示器 */}
          {loading && (
            <div className="flex justify-start">
              <div className="flex items-start space-x-2">
                <div className="flex-shrink-0">
                  <AvatarDisplay avatar={doctor?.avatar} name={doctor?.name} />
                </div>
                <div className="bg-white text-gray-900 border border-gray-200 px-3 py-2 rounded-lg">
                  <div className="flex items-center space-x-2">
                    <div className="flex space-x-1">
                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
                    </div>
                    <span className="text-sm text-gray-500">咨询医生正在思考...</span>
                  </div>
                </div>
              </div>
            </div>
          )}
          

        </div>

        {/* 输入区域 */}
        <div className="bg-white border-t border-gray-200 p-4 safe-area-bottom">
          <div className="flex items-center space-x-2">
            <button 
              onClick={handleImageUpload}
              className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
              title="上传图片"
            >
              <Image size={20} />
            </button>
            <button 
              onClick={handleCameraCapture}
              className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
              title="拍照"
            >
              <Camera size={20} />
            </button>
            <div className="flex-1 relative">
              <textarea
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                onKeyDown={handleKeyDown}
                placeholder="请输入您的问题..."
                className="w-full px-3 py-2 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                rows={1}
                style={{ minHeight: '40px', maxHeight: '120px' }}
              />
            </div>
            <button 
              onClick={() => setShowEmojiPicker(!showEmojiPicker)}
              className={`p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors ${
                showEmojiPicker ? 'bg-blue-100 text-blue-600' : ''
              }`}
              title="选择表情"
            >
              <Smile size={20} />
            </button>

            <button
              onClick={sendMessage}
              disabled={!message.trim() || loading}
              className={`p-2 rounded-lg transition-colors ${
                message.trim() && !loading
                  ? 'bg-primary-500 text-white hover:bg-primary-600'
                  : 'bg-gray-200 text-gray-400 cursor-not-allowed'
              }`}
            >
              {loading ? (
                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
              ) : (
                <Send size={20} />
              )}
            </button>
          </div>

          {/* 表情选择器 */}
          {showEmojiPicker && (
            <div className="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
              <div className="grid grid-cols-8 gap-2">
                {['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣', '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗', '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😯', '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐', '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕'].map((emoji) => (
                  <button
                    key={emoji}
                    onClick={() => handleEmojiSelect(emoji)}
                    className="w-8 h-8 text-lg hover:bg-white rounded transition-colors"
                  >
                    {emoji}
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* 隐藏的文件输入 */}
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            onChange={handleFileSelect}
            className="hidden"
          />
          <input
            ref={cameraInputRef}
            type="file"
            accept="image/*"
            capture="environment"
            onChange={handleCameraFileSelect}
            className="hidden"
          />
        </div>
      </div>
    );
  }

  // 原有的指定医生问诊界面
  return (
    <div className="flex flex-col h-screen bg-gray-50">
      {/* 头部 */}
      <div className="bg-white px-4 py-3 border-b border-gray-100 flex items-center justify-between">
        <div className="flex items-center space-x-3">
          <button 
            onClick={() => navigate(-1)}
            className="p-1 text-gray-600"
          >
            <ArrowLeft size={20} />
          </button>
          <div>
            <h1 className="text-base font-semibold text-gray-900">
              咨询医生
            </h1>
          </div>
        </div>
        <div className="flex items-center space-x-2">
          {/* 状态指示点已删除 */}
        </div>
      </div>



      {/* 消息列表 */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((msg) => (
          <div
            key={msg.id}
            className={`flex ${msg.isFromUser ? 'justify-end' : 'justify-start'} items-start space-x-2`}
          >
            {!msg.isFromUser && (
              <div className="flex-shrink-0">
                {msg.avatar ? (
                  msg.avatar.startsWith('http') ? (
                    <img 
                      src={msg.avatar} 
                      alt="医生头像"
                      className="w-10 h-10 rounded-full object-cover"
                    />
                  ) : (
                    <div 
                      className="w-10 h-10 rounded-full overflow-hidden"
                      dangerouslySetInnerHTML={{ __html: msg.avatar }}
                    />
                  )
                ) : (
                  <div className="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
                    <User size={20} className="text-gray-600" />
                  </div>
                )}
              </div>
            )}
            <div
              className={`max-w-xs px-3 py-2 rounded-lg ${
                msg.isFromUser
                  ? 'bg-primary-500 text-white'
                  : msg.type === 'system'
                  ? 'bg-gray-100 text-gray-600 text-center'
                  : 'bg-white text-gray-900 border border-gray-200'
              }`}
            >
                              {msg.type === 'image' ? (
                  <div>
                    <img 
                      src={msg.content} 
                      alt="用户上传的图片"
                      className="w-full h-auto rounded max-w-full"
                      style={{ maxHeight: '200px' }}
                    />
                    <p className={`text-xs mt-1 ${
                      msg.isFromUser ? 'text-primary-100' : 'text-gray-400'
                    }`}>
                      {msg.time}
                    </p>
                  </div>
                ) : (
                  <>
                    <p className="text-sm">{msg.content}</p>
                    <p className={`text-xs mt-1 ${
                      msg.isFromUser ? 'text-primary-100' : 'text-gray-400'
                    }`}>
                      {msg.time}
                    </p>
                  </>
                )}
            </div>
            {msg.isFromUser && (
              <div className="flex-shrink-0">
                {msg.avatar ? (
                  <div 
                    className="w-10 h-10 rounded-full overflow-hidden"
                    dangerouslySetInnerHTML={{ __html: msg.avatar }}
                  />
                ) : (
                  <div className="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
                    <User size={20} className="text-gray-600" />
                  </div>
                )}
              </div>
            )}
          </div>
        ))}
        
        {/* 加载状态指示器 */}
        {loading && (
          <div className="flex justify-start">
            <div className="bg-white text-gray-900 border border-gray-200 px-3 py-2 rounded-lg">
              <div className="flex items-center space-x-2">
                <div className="flex space-x-1">
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
                </div>
                <span className="text-sm text-gray-500">AI医生正在思考...</span>
              </div>
            </div>
          </div>
        )}
        

      </div>

      {/* 输入区域 */}
      <div className="bg-white border-t border-gray-200 p-4 safe-area-bottom">
        <div className="flex items-center space-x-2">
          <button 
            onClick={handleImageUpload}
            className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
            title="上传图片"
          >
            <Image size={20} />
          </button>
          <button 
            onClick={handleCameraCapture}
            className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
            title="拍照"
          >
            <Camera size={20} />
          </button>
          <div className="flex-1 relative">
            <textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="请输入您的问题..."
              className="w-full px-3 py-2 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
              rows={1}
              style={{ minHeight: '40px', maxHeight: '120px' }}
            />
          </div>
          <button 
            onClick={() => setShowEmojiPicker(!showEmojiPicker)}
            className={`p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors ${
              showEmojiPicker ? 'bg-blue-100 text-blue-600' : ''
            }`}
            title="选择表情"
          >
            <Smile size={20} />
          </button>
          <button
            onClick={sendMessage}
            disabled={!message.trim() || loading}
            className={`p-2 rounded-lg transition-colors ${
              message.trim() && !loading
                ? 'bg-primary-500 text-white hover:bg-primary-600'
                : 'bg-gray-200 text-gray-400 cursor-not-allowed'
            }`}
          >
            {loading ? (
              <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
            ) : (
              <Send size={20} />
            )}
          </button>
        </div>

        {/* 表情选择器 */}
        {showEmojiPicker && (
          <div className="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
            <div className="grid grid-cols-8 gap-2">
              {['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣', '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗', '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😯', '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐', '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕'].map((emoji) => (
                <button
                  key={emoji}
                  onClick={() => handleEmojiSelect(emoji)}
                  className="w-8 h-8 text-lg hover:bg-white rounded transition-colors"
                >
                  {emoji}
                </button>
              ))}
            </div>
          </div>
        )}

        {/* 隐藏的文件输入 */}
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          onChange={handleFileSelect}
          className="hidden"
        />
        <input
          ref={cameraInputRef}
          type="file"
          accept="image/*"
          capture="environment"
          onChange={handleCameraFileSelect}
          className="hidden"
        />
      </div>
    </div>
  );
} 